Form validation is a feature that’s not built into Vue.js.
However, we still need this feature very much.
In this article, we’ll look at how to display validation messages and defining required fields.
Field Name Placeholder
We can add a form field name placeholder with the {_field_} placeholder in our validation message.
For instance, we can write:
extend("positive", value => {
if (value >= 0) {
return true;
}
return "please enter a positive number for `{_field_}`";
});
Then we can use it by writing:
<template>
<div>
<ValidationProvider name="age" rules="positive" v-slot="{ errors }">
<input v-model="age" type="text">
<span>{{ errors[0] }}</span>
</ValidationProvider>
</div>
</template>
<script>
export default {
data() {
return {
age: undefined
};
}
};
</script>
If we enter something that’s not a positive number, we’ll see the message ‘please enter a positive number for age’.
{_field_} is replaced with the value of the name prop in ValidationProvider .
If the name prop isn’t on ValidationProvider , it can also use the value of the input’s name attribute.
For example, we can write:
<template>
<div>
<ValidationProvider name="age" rules="positive" v-slot="{ errors }">
<input v-model="value" name="age" type="text">
<span>{{ errors[0] }}</span>
</ValidationProvider>
</div>
</template>
<script>
export default {
data() {
return {
age: undefined
};
}
};
</script>
We’ll get the same result in both cases.
Arguments Placeholders
We can also add placeholders in our validation for arguments.
For example, we can write:
extend("min", {
validate(value, { min }) {
return value.min >= min;
},
params: ["min"],
message: "please enter at least {min} for {_field_}"
});
We used the object instead of the function for validation.
Other placeholders include _value_ with the value entered.
_rule_ is the rule name that triggered the message.
This way, we set the params property to get the arguments of the rule in the 2nd parameter of validate as an object with the min property in it.
Then we can add the placeholder for min as we did in the string we set for the message property.
Then we can use it by writing:
<template>
<div>
<ValidationProvider name="age" rules="min:10" v-slot="{ errors }">
<input v-model="age" name="age" type="text">
<span>{{ errors[0] }}</span>
</ValidationProvider>
</div>
</template>
<script>
export default {
data() {
return {
age: undefined
};
}
};
</script>
Now when we enter something less than 10, we get the error message ‘please enter at least 10 for age’.
Messages as Functions
The message property can be a method that returns a string.
For example, we can replace what we had with:
extend("min", {
validate(value, { min }) {
return value >= min;
},
params: ["min"],
message: (fieldName, placeholders) => {
return `please enter at least ${placeholders.min} for ${fieldName}`;
}
});
We replace the message string with a method that has the fieldName with the input field name.
The 2nd parameter is the placeholders , which is the same as args in the validate method.
Therefore, we get the same result as we have in the previous example.
Multiple Messages
By default, Vee-Validate stops validation when it encounters the first rule in the list that failed validation.
We can make Vee-Validate run all the validation rules on the list.
To do that we can set the bails prop to false .
For example, if we have:
extend("min", {
validate(value, { min }) {
return +value >= +min;
},
params: ["min"],
message: "too small"
});
extend("odd", {
validate: value => {
return value % 2 !== 0;
},
message: "not odd"
});
Then we can add a field by writing:
<template>
<div>
<ValidationProvider name="value" :bails="false" rules="min:10|odd" v-slot="{ errors }">
<input v-model="value" type="text">
<span>{{ errors.join('. ') }}</span>
</ValidationProvider>
</div>
</template>
<script>
export default {
data() {
return {
value: undefined
};
}
};
</script>
We set bails to false so that both rules will always be run.
We called join to join the errors entries together.
If we enter 2, then we’ll see ‘too small. not odd’ displayed.
Conclusion
We can add placeholders for field names and argument names.
Also, we can make all validation rules run even if the earlier ones failed.
Validation messages can also be generated by a function.
